<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标签属性绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<!-- 
			1.一般属性
			2.样式属性 
			v-bind
			1.字符串
			2.对象
			3.数组
		-->
		<style type="text/css">
			.active {
				width: 200px;
				height: 200px;
				background-color: orange;
				margin: 5px;
			}

			.text-danger {
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url">{{title}}</a>
			<input type="text" v-bind:name="name" />
			<!-- <div class="active">对象语法</div> -->
			<div :class="{active:isActive}">对象语法</div>
			<!-- <div v-bind:class="active text-danger">数组语法</div> -->
			<div :class="[activClass,dangerClass]">数组语法</div>
			<div :style="{color: color,fontSize: fontSize + 'px'}">内联样式</div>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					title: '学掌门',
					url: 'https://www.atstudy.com/',
					name: 'uname',
					isActive: true,
					activClass: 'active',
					dangerClass: 'text-danger',
					color: 'green',
					fontSize: 30
				}
			})
		</script>
	</body>
</html>
